import './App.css'
import React from 'react'

class HiFn extends React.Component {
  render() {
    return <h1>Hi World</h1>
  }
}
function HelloFn() {
  function handler () {
    console.log('Button Clicked!')
  }
  return(
    <div>
      <h1>Hello World</h1>
      <button onClick={handler}>点我</button>
    </div>
  )
}

function List() {
  const list = [
    {id: 1, name: '张三'},
    {id: 2, name: '李四'},
    {id: 3, name: '王五'},
  ]
  const handler = (item) => {
    console.log(item.name);
    
  }
  return (
    <ul>
      {
        list.map((item) => (
        <li key={item.id} onClick={() => handler(item)}>{item.name}</li>
        ))
      }
    </ul>
  )
}


function App() {
  // const name = '琪琪'
  // const list = [
  //   {id: 1, name: 'a'},
  //   {id: 2, name: 'b'},
  //   {id: 3, name: 'c'},
  // ]
  // const flag = true
  // const styleObj = {
  //   color: 'blue'
  // }
  // const showTitle = true
  // return (
  //   <div className="App">
  //     Hello World -- {name}
  //     {/* 循环渲染 */}
  //     <ul>
  //       {
  //         list.map((item) => (
  //           <li key={item.id}>{item.name}</li>
  //         ))
  //       }
  //     </ul>
  //     {/* 条件渲染 */}
  //     <div className="flag">{flag ? 'react真好玩' : 'vue更有趣'}</div>
  //     <div className="flag">
  //       {
  //         flag ? 
  //         (
  //           <div>
  //             <h1>
  //             react真好玩
  //             </h1>
  //           </div>
  //         ) :
  //         <h2>vue更有趣</h2>
  //       }

  //       {/* 样式 */}
  //       <div className="box" style={{color: 'red'}}>this is a box</div>
  //       <div style={styleObj}>this is a box</div>
  //       <div className="title">标题</div>
  //       <div className={showTitle ? 'title' : ''}>动态类名</div>

  //     </div>
  //   </div>
  // )
  return (
    <div className="App">
      {/* <HelloFn></HelloFn>
      <HiFn></HiFn> */}
      <List></List>
    </div>
  )
}
  


export default App;